<template>
	<view class="">
		<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration" indicator-active-color="rgba(248,207,0,.3)" indicator-color="rgba(248,207,0,.5)">
			<swiper-item v-for="(item , index) in banner" :key="index">
				<view class="swiper-item">
					<image :src="item.image" style="width: 100%;margin-top: 300upx;" mode="widthFix"></image>
				</view>
				<view class="lijitiyan" v-if="index==2" @click="tiyan">
					立即体验
				</view>
			</swiper-item>
		</swiper>
		<view class="tiaoguo" @click="tiyan">
			跳过
		</view>
	</view>
</template>

<style>
	.swiper {
		width: 100%;
		height: 100%;
		line-height: 100%;
		position: fixed;
		background-color: #FFFFFF;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
		text-align: center;
		line-height: 600rpx;
	}

	uni-swiper .uni-swiper-dots-horizontal {
		bottom: 40rpx;
	}

	.lijitiyan {
		width: 40%;
		height: 80rpx;
		border-radius: 56rpx;
		position: fixed;
		bottom: 10%;
		border: 2px solid #F8CF00;
		text-align: center;
		line-height: 80rpx;
		color: #F8CF00;
		left: 30%;
		z-index: 9999;
	}

	.tiaoguo {
		width: 110rpx;
		height: 48rpx;
		border-radius: 50rpx;
		position: fixed;
		top: 150rpx;
		right: 30rpx;
		text-align: center;
		line-height: 48rpx;
		color: #F8CF00;
		background-size: 100% 100%;
		border: 2rpx solid #F8CF00;
		font-size: 24rpx;

	}
</style>

<script>
	export default {
		data() {
			return {
				banner: [{
					image: '../../static/image/components/yindao_one.png'
				}, {
					image: '../../static/image/components/yindao_two.png'
				}, {
					image: '../../static/image/components/yindao_three.png'
				}],
				indicatorDots: true, //是否显示面板指示点
				autoplay: true, //是否自动切换
				interval: 2000, //自动切换时间间隔
				duration: 500 //滑动动画时长
			}
		},
		onLoad() {
			// this.neirong();
		},
		methods: {
			neirong: function() {
				var tt = this;
				this.configure.ajax({
					url: 'api/Category/get_start',
					data: {},
					method: 'POST',
					success: function(res) {
						// console.log(res)
						tt.banner = res.data;
					}
				})
			},
			tiyan: function() {
				// uni.reLaunch({
				// 	url: '../../pages/index/index' 
				// })
				uni.reLaunch({
					url: 'login'
				})
				// this.configure.switchTab('../../pages/index/index')
			}
		}
	}
</script>
